<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>校验表单</title>
    <style>
        h3 {margin-top: 0;color: #4caf50;}
        .login {width: 300px;padding: 32px;box-shadow: 2px 2px 10px rgba(0, 0, 0, .1);position: fixed;top: 40%;left: 50%;transform: translate(-50%, -50%);}
        .form-item {display: flex;margin-bottom: 16px;border-bottom: 1px solid #ccc;}
        .form-item .title {width: 70px;color: #666;font-size: 14px;}
        .form-item .content {flex: 1;}
        .form-item .content input {width: 100%;border: 0 none;padding: 2px 8px;outline: none;font-size: 16px;}
        .login-btn {width: 100%;border: 0 none;background-color: #4caf50;color: white;margin-top: 16px;outline: none;height: 32px;}
        .login-btn:active {background-color: #2da050;}
    </style>
</head>
<body>

    <form name="login-form" class="login" action="https://imooc.com">
        <h3>登入</h3>
        <label class="form-item">
            <div class="title">用户名</div>
            <div class="content">
                <input autocomplete="off" id="account" class="account" name="account" type="text">
            </div>
        </label>

        <label class="form-item">
            <div class="title">密码</div>
            <div class="content">
                <input autocomplete="off" name="pwd" type="password">
            </div>
        </label>

        <div>
            <button class="login-btn" type="submit">登入</button>
        </div>
    </form>

    <script>
        var loginForm = document.forms['login-form'];
        var pwdEle = loginForm.pwd;

        loginForm.onsubmit = function(e) {
            var pwd = pwdEle.value;

            if (pwd.length < 6 || pwd.length > 16) {
                alert('密码长度 6-16');
                return false; // 可以使用 return e.preventDefault() 代替
            }

            setTimeout(function() {
                alert('登入成功，马上跳转！');
            }, 1000);
        };
    </script>
``

这里获取到了表单元素，同时给表单的事件处理器属性 `onsubmit` 赋值，表示在表单被提交的时候做的事情。

在事件处理器中，通过输入框的 `value` 属性获取到了输入的值，对值进行了长度判断，如果长度不正确则返回 false，表单则会终止提交。
如果正确，则会根据 form 标签的 target 属性进行提交。

需要注意的是，这里如果使用 `addEventListener` 来监听 `submit` 事件，必须使用 `preventDefault` 来阻止默认事件，即阻止表单提交，不能使用 `return false;`。

```js
var loginForm = document.forms['login-form'];
var pwdEle = loginForm.pwd;

loginForm.addEventListener('submit', function(e) {
var pwd = pwdEle.value;

if (pwd.length < 6 || pwd.length > 16) {
alert('密码长度 6-16');
e.preventDefault(); // 代替return false
return;
}

setTimeout(function() {
alert('登入成功，马上跳转！');
}, 1000);
});
</body>
</html>